<template>
    <div class="channel-edit">
          <!-- 编辑栏 -->
        <van-cell :border="false">
              <div slot="title" class="title-text">我的新闻频道</div>
               <van-button
                 class="edit-btn"
                 type="danger"
                 plain
                 round
                 size="mini"
               >
                  编辑   
               </van-button>
        </van-cell>
         <!-- 我的新闻频道 -->
        <van-grid :gutter="10" class="my-grid">
          <van-grid-item 
            class="grid-item"
            v-for="(channel,index) in myChannels" 
            :key="index" 
             icon="clear"
             >
              <span 
               :class=" { active: index === active}"
               slot="text" 
               class="text"> {{channel.name }}</span>
             </van-grid-item>
        </van-grid>

        <!-- 新闻频道推荐 -->
        <van-cell :border="false">
            <div slot="title" class="title-text">新闻频道推荐</div>
        </van-cell>
        <van-grid :gutter="10" class="recommed-grid">
          <van-grid-item 
            class="grid-item"
             v-for="(channel,index) in recommendChannels" 
             :key="index" 
             icon="plus"
             :text="channel.name" 
             @click="onAddChannel(channel)"
             />
        </van-grid>

              

    </div>
</template>

<script>

 import { getAllChannels } from '@/api/channel'
   export default {
      name: 'ChannelEdit',
      props: {
         myChannels: {
             type: Array,
             required: true
         },
         active: {
             type:Number,
             required: true
         }
      },
      data() {
         return {
            // 所有频道
             allChannels:[],
             
         }
      },
      created() {
         this.loadAllChannels()
      },
      methods: {
          async loadAllChannels() {
              try {
                 const { data } = await getAllChannels()
                 //获取所有频道列表
                   this.allChannels = data.data.channels
                   
              } catch(err) {
                 this.$toast('很抱歉数据无了,稍后再试哦')
              }
          },
          onAddChannel(channel) {
             console.log(channel);
             // 调用父组件的方法，把channel传给父组件(修改数据交给父亲)
              this.$emit('addchannel',channel)
          },
      },
      computed: {
        
        // 推荐频道等于全部频道 减去 我的频道
         recommendChannels() {
           /*const channels = []
             this.allChannels.forEach(channel => {
                   // find 遍历数组，找到满足条件的元素
               const res = this.myChannels.find(myChannels => {
                     return myChannels.id === channel.id      
                  })
                  // 如果我的频道中不包括该频道项,则手记到推荐频道中
                   if (!res) {
                       channels.push(channel)
                   }
             })
             // 把计算结果返回
             return channels
         }
         */
         
         return  this.allChannels.filter(channel => {
              return !this.myChannels.find(myChannels => {
                  return  myChannels.id === channel.id
              })
          })
      }
   }
}

</script>

<style lang="less" scoped>
     .channel-edit {
          padding: 85px 0;
           .title-text {
              font-size: 32px;
              color: #333;
           }
           .edit-btn {
                width: 104px;
                height: 48px;
                font-size: 26px;
                color: #f85959;
                border:1px solid #f85959;
           }  
           /* 深度节点 */
         /deep/.grid-item {
               width: 160px;
               height: 86px;
               .van-grid-item__content {
                   white-space: nowrap;
                   background-color: #f4f5f6;
                .van-grid-item__text,
                  .text{
                     font-size: 28px;
                     color: #222;
                     margin-top:0;
                }
                .active {
                     color:pink;
                }
               }
           }
            /deep/.my-grid {
                 .grid-item {
                    .van-icon-clear {
                       position: absolute;
                       right: -10px;
                       top: -.10px;
                       font-size: 30px;
                       color: #cacaca;
                       z-index: 2;
                    }
                 }
            }

          /deep/.recommed-grid {
             .grid-item {
                .van-grid-item__content {
                      flex-direction: row;
                      .van-icon-plus {
                         font-size: 28px;
                         margin-right: 6px;
                      }
                 
                }
             }
           }
     }
</style>